import React, { useState ,useEffect} from 'react';
import { Button, Radio, Space, Divider, Table, Tag,Popconfirm } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import './Teacherlist.scss'
import service from '../../../api'
import {useNavigate} from 'react-router-dom'
import {
    RightOutlined
  } from '@ant-design/icons';
  
const App = () => {
//请求
var navigate = useNavigate();
var [data,setData] = useState([]);
useEffect(()=>{
    teachers_list()
},[])
var teachers_list = async()=>{
    var res = await service.teacher.teacher_list();
    console.log(res.data);
    
    setData(res.data);
}
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }
  const columns: ColumnsType<DataType> = [
    
    {
      title: '名字',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '部门',
      dataIndex: 'bumeng',
      key: 'bumeng',
    },
    {
      title: '性别',
      dataIndex: 'xingbie',
      key: 'xingbie',
    },
    {
      title: '教育',
      dataIndex: 'jiaoyu',
      key: 'jiaoyu',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '电子邮箱',
      dataIndex: 'youxiang',
      key: 'youxiang',
    },
    {
      title: '加入时间',
      dataIndex: 'shijian',
      key: 'shijian',
    },
    {
      title: '操作',

      render: () => (
        <Space size="middle">
          <p>查看</p>
          <p>编辑</p>
         
        </Space>
      ),
      
      
                           
    },
    
  ];  
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
  //跳转
  const showModal = () => {
    navigate('/index/teacheradd');
  };

  return (
    <div className='app'>
        <div className="topp">
            <div className="left">
                教师列表
            </div>
            <div className="right">
                首页 <RightOutlined /> 教师
            </div>
        </div>
      <div className="top">
        <div className="left">
        <Button type="primary" className='shanchu' >
            删除选择
          </Button>
          &nbsp;&nbsp;
        <Button type="primary" className='shuaxin' >
           刷新
          </Button>
        </div>
        <div className="right">
        <Button type="primary" className='daochu' >
            导出
          </Button>
          &nbsp;&nbsp;
        <Button type="primary" className='xinzeng' onClick={()=>{showModal()}}>
           新增导师
          </Button>
        </div>
      </div>


      <div className="button">
      <Table  rowSelection={{
          type: selectionType,
          // ...rowSelection,
        }} 
        columns={columns} dataSource={data} />;
      </div>
    </div>
  );
};

export default App;